<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 重点关注后面的 promise 对象的应用，这里的网络请求方法可以不管

        // xhr 对象是一个 http 请求的对象，是 js 中的原生对象
        // 写一个获取 json 数据的方法
        const getJSON = function (url) {
            const promise = new Promise(
                function (resolve, reject) {
                    const handler = function () {
                        if (this.readyState !== 4) {
                            // 4 代表请求完成
                            return;
                        }
                        if (this.status === 200) {
                            resolve(this.response);
                        } else {
                            reject(new Error(this.statusText));
                        }
                    }
                    // 创建一个 http 请求
                    const client = new XMLHttpRequest();
                    client.open('GET', url);
                    client.onreadystatechange = handler;
                    client.responseType = 'json';
                    client.setRequestHeader('Accept', 'application/json');
                    client.send();
                })
            return promise;
        }

        // getJSON 返回的是一个 promise 对象，其中的 then 方法可以接收两个参数，第一个参数是成功执行的函数，第二个参数是失败执行的函数
        getJSON("https://api.vvhan.com/api/ian/rand?type=json").then(
            function (data) {  // 如果成功执行的函数
                console.log(data);
            },
            function (error) { // 如果失败执行的函数
                console.log(error);
            }
        )
    </script>
</body>

</html>